
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>简易富文本编辑器.html</title>

  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="this is my page">
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <style type="text/css">
    #editor {width:600px;height:200px;border:1px solid #ccc;
    }
    button {margin:1px;border:1px solid #aaa;background:#ffe;cursor:pointer;overflow:hidden;}
    button:hover {background:#ccc;border:1px solid #00f;}
  </style>
</head>

<body>
<button id="btn1"></button>
<button id="btn2"></button>
<button id="btn3"></button>
<button id="btn4"></button>
<div id="editor">
  Click to Editor...
</div>
<input id="printContent" type="button" value="打印编辑器内容">
<script type="text/javascript">
  initEditor();

  //初始化
  function initEditor() {
    openOrCloseEditor("editor", "true");//开启元素编辑
    bindBtnCommand();//给样式按钮绑定命令
  }

  /**
   *
   * 功能： 开启元素编辑功能
   * 输入： el：编辑器ID; operate：Boolean值，表示启动还是关闭
   */
  function openOrCloseEditor(el, operate) {
    var editor = document.getElementById(el);
    editor.contentEditable = operate;
  }

  //按钮绑定命令
  function bindBtnCommand() {
    var btns = document.getElementsByTagName("button"),
      btnConfigs = "backcolor|#f00|设置背景色 bold|null|字体加粗 indent|null|缩进 fontName|微软雅黑|转换字体".split(" "),
      len = btnConfigs.length;
    for(var i = 0, btnConfig; btnConfig = btnConfigs[i]; i++) {
      (function(btnConfig, btn) {
        var msg = btnConfig.split("|"),
          lab = msg[0],
          value = msg[1],
          title = msg[2];
        btn.innerHTML = lab;
        btn.title = title;
        btn.onclick = function(e) {
          document.execCommand(lab, false, value);
        }
      })(btnConfig, btns[i]);
    }
  }

  //获取编辑器内嵌内容
  function getContent(el) {
    var editor = document.getElementById(el);
    return editor.innerHTML;
  }

  //打印按钮绑定触发事件
  document.getElementById("printContent").onclick = function(e) {
    var content = getContent("editor");
    document.write(content);
  };
</script>
</body>
</html>
